<template>
  <div class="app-container">
    <el-form ref="elForm" :model="formData" :disabled="$route.query.isInfo" :rules="rules" size="medium"
      label-width="100px">
      <h2 style="text-align: center">项目管理</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row>
        <el-col :span="8">
          <el-form-item label="项目名称" prop="projectContractId">
            <el-select v-model="formData.projectContractId" placeholder="请选择" clearable @change="projectChange"
              :style="{ width: '100%' }" v-if="!$route.query.isInfo && !$route.query.isEdit">
              <el-option v-for="dict in projectList" :key="dict.projectContractId" :label="dict.name"
                :value="dict.projectContractId" />
            </el-select>
            <el-input v-else :disabled="$route.query.isEdit" v-model="formData.projectName"
              placeholder="请输入项目状态"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5" style="margin:0">
          <!-- <el-form-item  prop="" style="margin:0"> -->
          <!-- <div class="detailChild" @click="changeDetil" v-if="$route.query.isEdit">
            查看子项目
          </div> -->

          <!-- </el-form-item> -->
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker value-format="yyyy-MM-dd" v-model="formData.startTime" type="date"
              placeholder="选择日期"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker value-format="yyyy-MM-dd" v-model="formData.endTime" type="date"
              placeholder="选择日期"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目状态">
            <el-input v-model="formData.status" placeholder="请输入项目状态"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="合同总金额" prop="totalMoney">
            <el-input-number v-model="formData.totalMoney" placeholder="请输入金额" :step="1"
              controls-position="right"></el-input-number><span style="margin-left:10px">(实时金额：{{ formData.contractMoney1 }}元)</span>  
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工程支出" prop="payMoney">
            <el-input-number v-model="formData.payMoney" placeholder="请输入金额" :step="1"
              controls-position="right"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工程收入" prop="receiveMoney">
            <el-input-number v-model="formData.receiveMoney" placeholder="请输入金额" :step="1"
              controls-position="right"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="剩余款项" prop="leaveMoney">
            <el-input-number v-model="formData.leaveMoney" placeholder="请输入金额" :step="1"
              controls-position="right"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目进度">
            <el-input-number v-model="formData.progress" placeholder="请输入项目进度" :step="1"
              controls-position="right"></el-input-number>
          </el-form-item>
        </el-col>
        
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="项目联系人" prop="projectLinkId">
            <UserDialog placeholder="请输入项目联系人" @change="changeUserItem()" v-model="formData.projectLinkId"></UserDialog>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目负责人" prop="leaderId">
            <UserDialog placeholder="请输入项目负责人" @change="changeUserItem()" v-model="formData.leaderId"></UserDialog>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form ref="elForm" :model="formData" :disabled="true" :rules="rules" size="medium" label-width="100px"
        v-if="$route.query.isInfo || $route.query.isEdit">
        <h4 class="form-header h4" v-if="$route.query.isInfo || $route.query.isEdit">
          工程合同
        
        </h4>
        <el-table :data="formData.itemBos"  :border="true" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="scopeExpand">
              <div class="p20 bgf9">
                <h4 class="form-header h4">
                  支出明细
                 
                </h4>
                <el-table :data="scopeExpand.row.payItems" :border="true" style="width: 100%">
                  <el-table-column label="类型" align="center">
                    <template slot-scope="scope">
                      <el-form-item label-width="0"
                        :prop="`itemBos.${scopeExpand.$index}.payItems.${scope.$index}.payTypeValue`"
                        :rules="rules.payTypeValue">
                        <el-select v-model="scope.row.payTypeValue" placeholder="请选择类型" clearable
                          :style="{ width: '100%' }">
                          <el-option v-for="dict in dict.type.project_contract_type" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>

                  <el-table-column label="金额" align="center">
                    <template slot-scope="scope">
                      <el-form-item label-width="0" :prop="`itemBos.${scopeExpand.$index}.payItems.${scope.$index}.money`"
                        :rules="rules.money">
                        <el-input-number v-model="scope.row.money"
                          @input="moneyChange($event, scope.$index, scopeExpand.$index)" placeholder="请输入金额" :step="1"
                          controls-position="right"></el-input-number>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="内容" align="center">
                    <template slot-scope="scope">
                      <el-form-item label-width="0"
                        :prop="`itemBos.${scopeExpand.$index}.payItems.${scope.$index}.content`" :rules="rules.content">
                        <el-input v-model="scope.row.content" placeholder="请输入内容"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="备注" align="center">
                    <template slot-scope="scope">
                      <el-form-item label-width="0"
                        :prop="`itemBos.${scopeExpand.$index}.payItems.${scope.$index}.remark`" :rules="rules.remark">
                        <el-input v-model="scope.row.remark" placeholder="请输入备注"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column min-width="200" label="附件" align="center">
                    <template slot-scope="scope">
                      <el-form-item label-width="0"
                        :prop="`itemBos.${scopeExpand.$index}.payItems.${scope.$index}.attachmentUrl`"
                        :rules="rules.attachmentUrl">
                        <FileUpload v-model="scope.row.attachmentUrl"></FileUpload>
                      </el-form-item>
                    </template>
                  </el-table-column>
                </el-table>

                <h4 class="form-header h4">
                  收入明细
                  
                </h4>
                <el-table :data="scopeExpand.row.receiveItems" :border="true" style="width: 100%">
                  <el-table-column label="发票日期" align="center">
                    <template slot-scope="scope">
                      <el-form-item label-width="0"
                        :prop="`itemBos.${scopeExpand.$index}.itemBos.${scopeExpand.$index}.receiveItems.${scope.$index}.invoiceTime`"
                        :rules="rules.invoiceTime">
                        <el-date-picker v-model="scope.row.invoiceTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                          :style="{ width: '100%' }" placeholder="请选择发票日期" clearable></el-date-picker>
                      </el-form-item>
                    </template>
                  </el-table-column>

                  <el-table-column label="发票金额(元)" align="center">
                    <template slot-scope="scope">
                      <el-form-item label-width="0"
                        :prop="`itemBos.${scopeExpand.$index}.receiveItems.${scope.$index}.invoiceMoney`"
                        :rules="rules.invoiceMoney">
                        <el-input-number v-model="scope.row.invoiceMoney" placeholder="请输入发票金额"
                          @input="remaining($event, scope.$index, scopeExpand.$index)" :step="1"
                          controls-position="right"></el-input-number>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="发票编号" align="center">
                    <template slot-scope="scope">
                      <el-form-item label-width="0"
                        :prop="`itemBos.${scopeExpand.$index}.receiveItems.${scope.$index}.invoiceCode`"
                        :rules="rules.invoiceCode">
                        <el-input-number v-model="scope.row.invoiceCode" placeholder="请输入发票编号" :step="1"
                          controls-position="right"></el-input-number>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="未到账提醒" align="center">
                    <template slot-scope="scope">
                      <el-form-item label-width="0"
                        :prop="`itemBos.${scopeExpand.$index}.receiveItems.${scope.$index}.isRemind`"
                        :rules="rules.isRemind">
                        <el-switch v-model="scope.row.isRemind" active-color="#13ce66" inactive-color="#ff4949"
                          :active-value="1" :inactive-value="0"></el-switch>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="支付年份" align="center">
                    <template slot-scope="scope">
                      <el-form-item label-width="0"
                        :prop="`itemBos.${scopeExpand.$index}.receiveItems.${scope.$index}.year`" :rules="rules.year">
                        <el-date-picker format="yyyy" value-format="yyyy" v-model="scope.row.year" type="year"
                          placeholder="选择年"></el-date-picker>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="支付日期" align="center">
                    <template slot-scope="scope">
                      <el-form-item label-width="0"
                        :prop="`itemBos.${scopeExpand.$index}.receiveItems.${scope.$index}.payTime`"
                        :rules="rules.payTime">
                        <el-date-picker v-model="scope.row.payTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                          :style="{ width: '100%' }" placeholder="请选择发票日期" clearable></el-date-picker>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="支付金额(元)" align="center">
                    <template slot-scope="scope">
                      <el-form-item label-width="0"
                        :prop="`itemBos.${scopeExpand.$index}.receiveItems.${scope.$index}.payMoney`"
                        :rules="rules.payMoney">
                        <el-input-number v-model="scope.row.payMoney" placeholder="请输入支付金额"
                          @input="remaining($event, scope.$index, scopeExpand.$index)" :step="1"
                          controls-position="right"></el-input-number>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="剩余款项" align="center">
                    <template slot-scope="scope">
                      <el-form-item label-width="0"
                        :prop="`itemBos.${scopeExpand.$index}.receiveItems.${scope.$index}.leaveMoney`"
                        :rules="rules.leaveMoney">
                        <el-input-number v-model="scope.row.leaveMoney" placeholder="请输入剩余款项" :disabled="true" :step="1"
                          controls-position="right"></el-input-number>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="备份" align="center">
                    <template slot-scope="scope">
                      <el-form-item label-width="0"
                        :prop="`itemBos.${scopeExpand.$index}.receiveItems.${scope.$index}.copy`" :rules="rules.copy">
                        <el-input v-model="scope.row.copy" placeholder="请输入备份"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column min-width="200" label="附件" align="center">
                    <template slot-scope="scope">
                      <el-form-item label-width="0"
                        :prop="`itemBos.${scopeExpand.$index}.receiveItems.${scope.$index}.attachmentUrl`"
                        :rules="rules.attachmentUrl">
                        <FileUpload v-model="scope.row.attachmentUrl"></FileUpload>
                      </el-form-item>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="工程名称" align="center">
            <template slot-scope="scope">
              <el-form-item label-width="0" :prop="`itemBos.${scope.$index}.itemName`" :rules="rules.itemName">
                <el-input v-model="scope.row.itemName" placeholder="请输入工程名称"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="开始时间" align="center">
            <template slot-scope="scope">
              <el-form-item label-width="0" :prop="`itemBos.${scope.$index}.startTime`" :rules="rules.startTime">
                <el-date-picker value-format="yyyy-MM-dd" v-model="scope.row.startTime" type="date"
                  placeholder="选择日期"></el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="结束时间" align="center">
            <template slot-scope="scope">
              <el-form-item label-width="0" :prop="`itemBos.${scope.$index}.endTime`" :rules="rules.endTime">
                <el-date-picker value-format="yyyy-MM-dd" v-model="scope.row.endTime" type="date"
                  placeholder="选择日期"></el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="项目负责人" align="center">
            <template slot-scope="scope">
              <el-form-item label-width="0" :prop="`itemBos.${scope.$index}.leaderId`" :rules="rules.leaderId">
                <UserDialog placeholder="请输入项目负责人"v-model="scope.row.leaderId">
                </UserDialog>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="实际发生金额" align="center">
            <template slot="header" slot-scope="scope" >
              <div>实际发生金额</div>
              <div>（{{ formData.totalMoney1 || 0.00}}）</div>
            </template>
            <template slot-scope="scope">
              <el-form-item label-width="0" :prop="`itemBos.${scope.$index}.totalMoney`" :rules="rules.totalMoney">
                <el-input-number @change="receiveMoneyChange($event, scope)" v-model="scope.row.totalMoney"
                  placeholder="请输入金额" :step="1" controls-position="right"></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="工程支出" align="center">
            <template slot="header" slot-scope="scope" >
              <div>工程支出</div>
              <div>（{{ formData.payMoney1|| 0.00}}）</div>
            </template>
            <template slot-scope="scope">
              <el-form-item label-width="0" :prop="`itemBos.${scope.$index}.payMoney`" :rules="rules.payMoney">
                <el-input disabled v-model="scope.row.payMoney"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="工程收入" align="center">
            <template slot="header" slot-scope="scope" >
              <div>工程收入</div>
              <div>（{{ formData.receiveMoney1|| 0.00}}）</div>
            </template>
            <template slot-scope="scope">
              <el-form-item label-width="0" :prop="`itemBos.${scope.$index}.receiveMoney`" :rules="rules.receiveMoney">
                <el-input disabled v-model="scope.row.receiveMoney"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="待结金额" align="center">
            <template slot="header" slot-scope="scope" >
              <div>待结金额</div>
              <div>（{{ formData.leaveMoney1|| 0.00}}）</div>
            </template>
            <template slot-scope="scope">
              <el-form-item label-width="0" :prop="`itemBos.${scope.$index}.leaveMoney`" :rules="rules.leaveMoney">
                <el-input disabled v-model="scope.row.leaveMoney" placeholder="请输入待结金额"
                  controls-position="right"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <el-col :span="24">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="!$route.query.isInfo" type="primary" @click="submitForm">提交</el-button>
          <!-- <el-button  v-if="$route.query.isInfo" type="primary" @click="changeDetail">查看子项目</el-button> -->
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import store from "@/store";
import { listSelect } from "@/api/business/projectContract.js";
import {
  projectAdd,
  projectEdit,
  projectInfo
} from "@/api/business/project.js";

export default {
  name: "AddBxgl",
  components: {},
  dicts: ["sys_fee_subject", "sys_fee_type"],

  props: [],
  data() {
    return {
      totalFee: 0,
      name: store.getters.name,
      formData: {
        payMoney: undefined,
        receiveMoney: undefined,
        leaveMoney: undefined,
        projectItemId: undefined,
        projectItemData: undefined,
        totalMoney: undefined,
        leaderId: undefined,
        endTime: undefined,
        startTime: undefined,
        itemName: undefined,
        nickName: undefined,
        projectContractId: undefined,
        progress: undefined,
        status: undefined
      },
      projectList: [],
      itemVos: [],
      rules: {
        projectContractId: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        leaderId: [
          {
            required: false,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        payMoney: [
          {
            required: false,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        receiveMoney: [
          {
            required: false,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        projectItemData: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        leaveMoney: [
          {
            required: false,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        totalMoney: [
          {
            required: false,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        endTime: [
          {
            required: false,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        startTime: [
          {
            required: false,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        itemName: [
          {
            required: false,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        nickName: [
          {
            required: false,
            message: "不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {},

  created() {
    this.listSelect();
    // this.getUser();
    if (this.$route.query.isEdit || this.$route.query.isInfo) {
      this.getprojectInfo();
    }
  },
  mounted() {
  },
  methods: {
    changeUserItem(e) {
      this.formData.leaderName = e.nickName;
    },
    listSelect() {
      listSelect().then(response => {
        this.projectList = response.data;

      });
    },
    projectChange(e) {
      console.log(e, '++++++++', this.projectList);
      let row = this.projectList.find((i) => i.projectContractId == e);
      console.log(row);
      this.formData.projectContractId = row.projectContractId;
      this.formData.projectName = row.name;
      this.formData.startTime = row.startDate;
      this.formData.endTime = row.endDate;
      this.formData.leaderName = row.projectLeaderName
      this.formData.leaderId = row.projectLeaderId
      this.formData.projectLinkId = row.projectLinkId
      this.formData.projectLinkName = row.projectLinkName
      this.formData.totalMoney = row.totalMoney
      this.formData.payMoney = row.pay
      this.formData.receiveMoney = row.receiveMoney
      this.formData.leaveMoney = row.leaveMoney

      // this.formData.projectItemId = "";
      // this.formData.projectItemData = {};
      // if (e) {
      //   let index = this.projectList.findIndex(v => {
      //     return e == v.projectContractId;
      //   });
      //   this.itemVos = this.projectList[index].itemVos;
      //   this.formData.projectName = this.projectList[index].name;
      // } else {
      //   this.itemVos = [];
      //   this.formData.projectName = "";
      // }
      // console.log(this.formData);
    },
    projectItemChange(e) {
      if (e) {
        this.formData = {
          projectItemData: {
            projectItemId: e.projectItemId,
            itemName: e.itemName
          },
          ...this.formData,
          ...e
        };
      }
    },
    changeUser(e) {
      this.formData.applyUserName = e.nickName;
      this.formData.deptName = e.dept.deptName;
      this.formData.deptId = e.deptId;
    },

    handleAdd() {
      this.formData.details.push({ fee: "", info: "", subjectValue: "" });
    },
    handleDele() {
      if (this.formData.details.length == 1) return;
      this.formData.details.pop();
    },
    getprojectInfo() {
      projectInfo(this.$route.query.id).then(response => {
        this.formData = JSON.parse(JSON.stringify(response.data));
        this.formData.itemBos = JSON.parse(
          JSON.stringify(response.data.items)
        );
        setTimeout(() => {
          this.projectChange(response.data.projectContractId);
          this.formData.projectItemData = {
            projectItemId: response.data.projectItemId,
            itemName: response.data.itemName
          };

        }, 100);
      });
    },
    getUser() {
      getuser(store.state.user.id).then(response => {
        console.log(response);
        this.formData.deptName = response.data.user.dept.deptName;
        this.formData.deptId = response.data.user.dept.deptId;
      });
    },
    changeDetil() {
      this.$router.push(
        "/projectContract/addContract?isInfo=true&id=" + this.formData.projectContractId
      );
    },
    submitForm() {
      this.$refs["elForm"].validate(valid => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          // console.log(this.formData.projectItemData);
          // query.projectItemId = this.formData.projectItemData.projectItemId;
          if (this.formData.projectId != undefined) {
            projectEdit(query).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            projectAdd(query).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      const obj = { path: "./project" };
      this.$tab.closeOpenPage(obj);
    }
  }
};
</script>

<style scoped lang="scss">
.detailChild {
  font-size: 14px;
  color: #1E90FF;
  text-decoration: underline;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-left: 8px
}
</style>
